<template>
  <div class="line-box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</template>

<style lang="less" scoped>
.line-box {
  width: 180px;
  height: 80px;
  display: flex;
}
.line-box div {
  width: 6px;
  border-radius: 6px;
  margin-right: 6px;
}
.line-box div:nth-child(1) {
  animation: bar1 1.5s 0.2s infinite linear;
}
@keyframes bar1 {
  0% {
    background-color: #ff2859;
    height: 10%;
    margin-top: 25%;
  }
  50% {
    background-color: #ff2859;
    height: 100%;
    margin-top: 0%;
  }
  100% {
    background-color: #ff2859;
    height: 10%;
    margin-top: 25%;
  }
}
.line-box div:nth-child(2) {
  animation: bar2 1.5s 0.4s infinite linear;
}
@keyframes bar2 {
  0% {
    background-color: #00b7a2;
    height: 10%;
    margin-top: 25%;
  }
  50% {
    background-color: #00b7a2;
    height: 100%;
    margin-top: 0%;
  }
  100% {
    background-color: #00b7a2;
    height: 10%;
    margin-top: 25%;
  }
}
.line-box div:nth-child(3) {
  animation: bar3 1.5s 0.6s infinite linear;
}
@keyframes bar3 {
  0% {
    background-color: #8c7ff2;
    height: 10%;
    margin-top: 25%;
  }
  50% {
    background-color: #8c7ff2;
    height: 100%;
    margin-top: 0%;
  }
  100% {
    background-color: #8c7ff2;
    height: 10%;
    margin-top: 25%;
  }
}
.line-box div:nth-child(4) {
  animation: bar4 1.5s 0.8s infinite linear;
}
@keyframes bar4 {
  0% {
    background-color: #7fd0f2;
    height: 10%;
    margin-top: 25%;
  }
  50% {
    background-color: #7fd0f2;
    height: 100%;
    margin-top: 0%;
  }
  100% {
    background-color: #7fd0f2;
    height: 10%;
    margin-top: 25%;
  }
}
.line-box div:nth-child(5) {
  animation: bar5 1.5s 1s infinite linear;
}
@keyframes bar5 {
  0% {
    background-color: #7ff2d3;
    height: 10%;
    margin-top: 25%;
  }
  50% {
    background-color: #7ff2d3;
    height: 100%;
    margin-top: 0%;
  }
  100% {
    background-color: #7ff2d3;
    height: 10%;
    margin-top: 25%;
  }
}
.line-box div:nth-child(6) {
  animation: bar6 1.5s 1.2s infinite linear;
}
@keyframes bar6 {
  0% {
    background-color: #7ff2a0;
    height: 10%;
    margin-top: 25%;
  }
  50% {
    background-color: #7ff2a0;
    height: 100%;
    margin-top: 0%;
  }
  100% {
    background-color: #7ff2a0;
    height: 10%;
    margin-top: 25%;
  }
}
.line-box div:nth-child(7) {
  animation: bar7 1.5s 1.4s infinite linear;
}
@keyframes bar7 {
  0% {
    background-color: #adf27f;
    height: 10%;
    margin-top: 25%;
  }
  50% {
    background-color: #adf27f;
    height: 100%;
    margin-top: 0%;
  }
  100% {
    background-color: #adf27f;
    height: 10%;
    margin-top: 25%;
  }
}
.line-box div:nth-child(8) {
  animation: bar8 1.5s 1.6s infinite linear;
}
@keyframes bar8 {
  0% {
    background-color: #e7f27f;
    height: 10%;
    margin-top: 25%;
  }
  50% {
    background-color: #e7f27f;
    height: 100%;
    margin-top: 0%;
  }
  100% {
    background-color: #e7f27f;
    height: 10%;
    margin-top: 25%;
  }
}
.line-box div:nth-child(9) {
  animation: bar9 1.5s 1.8s infinite linear;
}
@keyframes bar9 {
  0% {
    background-color: #ecaa64;
    height: 10%;
    margin-top: 25%;
  }
  50% {
    background-color: #ecaa64;
    height: 100%;
    margin-top: 0%;
  }
  100% {
    background-color: #ecaa64;
    height: 10%;
    margin-top: 25%;
  }
}
</style>
